<!--环保投入计划汇总表 RptInvestmentPlan-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120" v-if="!modelSelect">
            <Row class="query-form" >
                <Col span="8">
                    <FormItem label='二级集团：' prop='belongOrgId'>
                        <Select class='query-form-el' v-model='dataToQuery.belongOrgId' label-in-value @on-change="belongChange">
                            <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='年度：' prop='year'>
                        <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag" >
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label="单位名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                      :currentOrgId="dataToQuery.companyId" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="项目名称：" prop="projectName" >
                        <Input v-model='dataToQuery.projectName' class="query-form-el"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="项目类型：" prop="content" >
                        <Select class='query-form-el' placeholder="请选择项目分类" type='text' v-model='dataToQuery.projectCateArrays' multiple>
                            <Option v-for="item in dictMap['EI-000001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportForm">导出</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;" v-if="!modelSelect">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal :title="getModalTitle('次年环保投入计划')" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 :styles="{height:'620px'}"  class-name='limit-height-dialog' >
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='单位名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='年度：' prop='rptPeroid'>
                                    <div v-if="mode === 'view'">{{ dataToView.rptPeroid }}</div>
                                    <Input v-else class=''placeholder="请选择年度" type='text' readonly v-model='dataToView.rptPeroid'></Input>
                                    <!--<DatePicker v-else class="w" placeholder="请选择年度" disabled v-model='dataToView.rptPeroidDate' type="year"></DatePicker>-->
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label="项目类型：" prop="projectCategory" >
                                    <div v-if="mode === 'view'">{{this.dictMap['EI-000001'] && this.dictMap['EI-000001'][dataToView.projectCategory] && this.dictMap['EI-000001'][dataToView.projectCategory].codingName}}</div>
                                    <Select v-else class='w' placeholder="请选择项目分类" type='text' v-model='dataToView.projectCategory'>
                                        <Option v-for="item in dictMap['EI-000001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='项目名称：' prop='projectName'>
                                    <div v-if="mode === 'view'">{{ dataToView.projectName }}</div>
                                    <Input v-else class=''placeholder="请填写项目名称" type='text' v-model='dataToView.projectName'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='项目基本内容：' prop='content'>
                                    <div v-if="mode === 'view'">{{ dataToView.content }}</div>
                                    <Input v-else class='w' placeholder="请填写项目基本内容" type='textarea' v-model='dataToView.content'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='投资金额（万元）：' prop='investmentMoney'>
                                    <div v-if="mode === 'view'">{{ dataToView.investmentMoney }}</div>
                                    <InputNumber v-else class='w'placeholder="请填写投资金额（万元）" :min="0" type='text' v-model='dataToView.investmentMoney'></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='预计完成时间：' prop='finTime'>
                                    <div v-if="mode === 'view'">{{ dataToView.expectedFinTime ? dataToView.expectedFinTime.substr(0,10) : '' }}</div>
                                    <DatePicker v-else class="w" placeholder="请选择完成时间" v-model='dataToView.expectedFinTime' placement="top-start"
                                                :start-date="new Date(new Date().getFullYear()+1, 0, 1)"
                                                :options="{disabledDate(date) {return date && date.valueOf() < new Date(new Date().getFullYear()+1, 0, 1);}}"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='效果评价：' prop='effect'>
                                    <div v-if="mode === 'view'">{{ dataToView.effect }}</div>
                                    <Input v-else class='w' placeholder="请填写效果" type='text' v-model='dataToView.effect'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表人：' prop='registrant'>
                                    <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                    <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='联系电话：' prop='creatorPhone'>
                                    <div v-if="mode === 'view'">{{dataToView.creatorPhone}}</div>
                                    <Input v-else type='text' v-model='dataToView.creatorPhone'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.createDate' readonly></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>

                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        name: "auditForm",
        components:{cascaderDom},
        props: ['companyId', 'modelSelect','year','projectCategory'],
        data(){
            return {
                ...this.createCommonDataField(),
                columns1: [
                    // { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
                            if(params.row.id === '-1') return h('span', "汇总");
                            return h('span', (params.index - this.modelSelect?0:1) + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                    }},
					{ key:'companyName',title: '单位名称', fixed: 'left', align: 'center' , minWidth :200},
                    { key:'rptPeroid',title: '年度', fixed: 'left', align: 'center', minWidth :80},
                    { key:'projectCategory',title: '项目类型',  align: 'center', minWidth :140, render:(h, params)=>{
                            return h('span',  (this.dictMap['EI-000001'] && this.dictMap['EI-000001'][params.row.projectCategory] && this.dictMap['EI-000001'][params.row.projectCategory].codingName))
                        }, },
                    { key:'projectName',title: '项目名称',  align: 'center' , minWidth :140},
                    { key:'content',title: '项目基本内容',  align: 'center' , minWidth :160, tooltip:true},
                    { key:'investmentMoney',title: '投资金额（万元）',  align: 'center', minWidth :140 },
                    { key:'expectedFinTime',title: '预计完成时间',  align: 'center', render: this.renderCellDate, minWidth :120 },
                    { key:'effect',title: '效果评价',  align: 'center' , minWidth :120, tooltip:true},
                    { key:'createUserName',title: '填表人',  align: 'center', width: 140  },
                    { key:'creatorPhone',title: '联系电话',  align: 'center', width: 140  },
                    { key:'createDate',title: '填表时间',  align: 'center', width: 120, render: this.renderCellDate },
                    // this.getActionColumns()
                    !this.modelSelect? this.getActionColumns((params) => {return params.row.id === '-1';})
                        :{title: '操作', key: 'action', fixed: 'right', align: 'center', width:'80',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {fontSize: '12px'},
                                    on: {
                                        click: () => {
                                            // this.checkSave(params.row);
                                            this.$emit('getSelectModelData',params.row);
                                        }
                                    }
                                }, '选择'),
                            ]);
                    }}
                ],
                ruleCustom : {
                    companyId: [ { required: true, message: '请填写企业名称', trigger: 'change' } ],
                    projectCategory: [ { required: true, message: '请填写项目分类', trigger: 'change' } ],
                    rptPeroid: [ { required: true, message: '请填写项目分类', trigger: 'change', } ],
                    // rptPeroidDate: [ { required: true, message: '请填写项目分类', trigger: 'change', type:'date' } ],
                    projectName: [ { required: true, message: '请填写项目分类', trigger: 'change' } ],
					creatorPhone: [{ pattern: /^((0\d{2,3}-\d{7,8})|(1[123456789]\d{9}))$/, required: true, message: '请填写联系电话', trigger: 'change' }],
                },
                tableHeight:10,
                dictMap: {},
                // api
                queryUrl:Api.queryEnRptInvestmentPlan,
                deleteUrl:Api.deleteEnRptInvestmentPlan,
                exportUrl:Api.exportEnRptInvestmentPlan,
                bthDeleteUrl:Api.batchDeleteEnRptInvestmentPlan,
                getUrl:Api.getEnRptInvestmentPlan,
                updateUrl:Api.updateEnRptInvestmentPlan,
                saveUrl:Api.saveEnRptInvestmentPlan,

                twoLevel:[]
            }
        },
        async mounted() {
            await this.$http.get(Api.queryDictBycode+"EI-000001",{}).then((res)=>{
                // 数据字典 list 转 map，方便调用
                this.dictMap = {
                    'EI-000001':this.dictListToMap(res.data.data['EI-000001'])
                }
            }).catch(e => {
                this.$Message.error("数据字典获取失败")
            });
            this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                this.twoLevel=res.data.data
            })
            this.tableHeight = window.innerHeight - 325
            this.query();
        },
        methods:{
            ...pageCommonFunction,
            belongChange(value) {
                this.dataToQuery.belongOrgId = value.value
                this.dataToQuery.belongOrgName = value.label
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            exportForm(){
                if(this.dataToQuery.yearDate && this.dataToQuery.belongOrgId) {
                    this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
                    if(this.dataToQuery.projectCateArrays) {
                        this.dataToQuery.projectCategories = this.arrayToInFormat(this.dataToQuery.projectCateArrays)
                    }
                    this.exportFormSubmit()
                } else {
                    this.$Message.error("导出时候二级集团和年份必选")
                }
            },
            query() {
                if(this.dataToQuery.projectCateArrays) {
                    this.dataToQuery.projectCategories = this.arrayToInFormat(this.dataToQuery.projectCateArrays)
                }
                if(this.dataToQuery.yearDate) {
                    this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
                }
                if (this.modelSelect) {
                    this.dataToQuery.year = this.year
                    this.dataToQuery.projectCategory = this.projectCategory
                    this.dataToQuery.orgId = this.companyId
                    this.pagedata.currentPage =1
                    this.pagedata.pageSize = 100
                }
                this.queryAjax();
            },
            submit(name) {
                // if(this.dataToView.rptPeroidDate) {
                //     this.dataToView.rptPeroid = this.dataToView.rptPeroidDate.getFullYear();
                // }
                this.submitAjax(name);
            },
            beforeEditDialogOpen(data) {
                // data.row.rptPeroidDate = new Date(data.row.rptPeroid + '-01-01');
            },
            createEmptyDataToAdd(){
                return {
                    investmentMoney:null,
                    creatorPhone: this.currentUser.mobileNumber,
                    rptPeroid: (new Date().getFullYear()+1).toString(),
                    // rptPeroidDate: new Date()
                }
            }
        },
        watch:{
        },

    }
</script>

<style lang='css' scoped>

</style>
